<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="/assets/lib/layui/css/layui.css" />
		<link rel="stylesheet" href="/assets/css/article/art_list.css" />
	</head>
	<body>
		<!-- 卡片区域 -->
		<div class="layui-card">
			<div class="layui-card-header">文章列表</div>
			<div class="layui-card-body">
				<!-- 筛选区域 -->
				<form class="layui-form" id="form-search">
					<div class="layui-form-item layui-inline">
						<select name="cate_id"></select>
					</div>
					<div class="layui-form-item layui-inline">
						<select name="state">
							<option value="">所有状态</option>
							<option value="已发布">已发布</option>
							<option value="草稿">草稿</option>
						</select>
					</div>
					<div class="layui-form-item layui-inline">
						<button
							class="layui-btn"
							lay-submit
							lay-filter="formDemo"
						>
							筛选
						</button>
					</div>
				</form>
				<!-- 列表区域 -->
				<table class="layui-table">
					<colgroup>
						<col />
						<col width="150" />
						<col width="180" />
						<col width="150" />
						<col width="150" />
					</colgroup>
					<thead>
						<tr>
							<th>文章标题</th>
							<th>分类</th>
							<th>发表时间</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
				<!-- 分页区域 -->
				<div id="pageBox"></div>
			</div>
		</div>

		<!-- 列表数据的模板引擎 -->
		<script type="text/html" id="tpl-table">
			{{each data}}
			<tr>
				<td>{{$value.title}}</td>
				<td>{{$value.cate_name}}</td>
				<td>{{$value.pub_date|dataFormat}}</td>
				<td>{{$value.state}}</td>
				<td>
					<button
						type="button"
						class="layui-btn layui-btn-xs btn-edit"
						data-id="{{$value.Id}}"
					>
						编辑
					</button>
					<!-- 下面的btn-delete与art_cate共用 -->
					<button
						type="button"
						class="layui-btn layui-btn-danger layui-btn-xs btn-delete"
						data-id="{{$value.Id}}"
					>
						删除
					</button>
				</td>
			</tr>
			{{/each}}
		</script>

		<!-- 分类可选项的模板结构 -->
		<script type="text/html" id="tpl-cate">
			<option value="">所有分类</option>
			{{each data}}
			<option value="{{$value.id}}">{{$value.name}}</option>
			{{/each}}
		</script>

		<!-- 导入第三方的 JS 插件 -->
		<script src="/assets/lib/layui/layui.all.js"></script>
		<script src="/assets/lib/jquery.js"></script>
		<script src="/assets/js/baseAPI.js"></script>
		<script src="/assets/lib/template-web.js"></script>
		<!-- 导入自己的 JS 脚本 -->
		<script src="/assets/js/article/art_list.js"></script>
	</body>
</html>
